<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/pay1.css">
    <link rel="stylesheet" type="text/css" href="/static/css/pay2.css">
    <link rel="stylesheet" type="text/css" href="/static/css/pay3.min.css">
    <style>
        #header {
            height: 60px;
            background-color: #fff;
            border-bottom: 1px solid #d9d9d9;
            margin-top: 0px;
        }

        .header-container {
            width: 950px;
            margin: 0 auto;
        }

        #header .header-title {
            height: 60px;
            float: left;
        }

        .alipay-logo {
            display: block;
            position: relative;
            left: 0;
            top: 10px;
            float: left;
            height: 40px;
        }

        #header .logo-title {
            font-size: 16px;
            font-weight: normal;
            font-family: "Microsoft YaHei",微软雅黑,"宋体";
            border-left: 1px solid #676d70;
            color: #676d70;
            height: 20px;
            float: left;
            margin-top: 15px;
            margin-left: 10px;
            padding-top: 0px;
            padding-left: 10px;
        }

        div#container {
            width: 1340px;
            /*border: 1px solid red;*/
            margin: 20px auto;
        }

        .m-subheader {
            /* border: 1px solid red; */
            padding: 40px 0 40px 0;
        }

        .payAmount-area1 {
            text-align: right;
            z-index: 1;
        }

        .payAmount-area1 .amount-font-22 {
            font-size: 22px;
            line-height: 22px;
            color: #f60;
        }

        .m-portlet__body.qrguide-area {
            background: url(/img/newpageImg/qrguide1.png)no-repeat;
            background-position: 70% 56px;
            background-size: 175px auto;
            /* right: 0px; */
        }
        /**扫码区**/
        .qrcode-header {
            display: block;
            width: auto;
            margin: 0;
            padding: 0;
            margin-top: 75px;
            margin-bottom: 16px;
        }

        .ft-center {
            text-align: center;
        }

        .qrcode-header-money {
            font-size: 26px;
            font-weight: 700;
            color: #f60;
        }

        .qrcode-body {
            text-align: center;
        }

        .qrcode-border {
            border: 1px solid #c4c5d6;
            width: 173px;
            margin-left: 43%;
            margin-right: 43%;
        }
        /**二维码图片**/
        .erweimaImg {
            width: 170px;
            height: 170px;
        }

        .qrcode-img-explain {
            padding: 10px 0 6px;
        }

        .fn-clear {
            zoom: 1;
        }

        .qrcode-img-explain img {
            margin-left: 20px;
            margin-top: 5px;
            height: 28px;
            float: left;
        }

        .qrcode-img-explain div {
            margin-right: 10px;
        }

        .qrcode-footer {
            text-align: center;
        }

        .qrcode-footer a.qrcode-downloadApp {
            /* border: 1px solid red; */
            margin-top: 10px;
            display: inline-block;
            font-size: .8rem;
        }
        /**订单详情**/
        .orderDetailsPanel {
            /*border: 1px solid red;*/ padding: 2.2rem;
            position: relative;
        }

        .first {
            font-weight: 700;
            font-size: 14px;
            display: block;
            margin-bottom: 10px;
            margin-top: 4px;
        }

        .order-detail-container {
            width: 680px;
        }

        .order-item table {
            table-layout: fixed;
            width: 680px;
        }

        .order-item table tr {
            height: 30px;
        }

        .sub-th {
            width: 136px;
        }

        .payAmount-area-expand {
            bottom: 36px;
        }

        .payAmount-area-expand {
            position: absolute;
            bottom: 16px;
            right: 23px;
            text-align: right;
            z-index: 1;
        }

        .payAmount-area-expand .amount-font-22 {
            font-size: 22px;
            line-height: 22px;
            color: #f60;
        }
    </style>
</head>
<body class="m-page--wide m-header--fixed m-header--fixed-mobile m-footer--push m-aside--offcanvas-default">

    <jsp:include page="head.jsp"></jsp:include>
    <div class="m-grid m-grid--hor m-grid--root m-page" style=" ">


        <div class="" style="height: 500px">
            <div id="container">
                <div class="m-portlet">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">

                                <h3 class="m-portlet__head-text">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">
                                            扫码支付
                                        </font>
                                    </font>

                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="m-portlet__nav">
                                <li class="m-portlet__nav-item">
                                    <a class="btn btn-info CheckOrderBtn" style="color:#fff;" onclick="pay('${order.id}')">立即支付</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body qrguide-area">

                        <div class="qrcode-header">
                            <div class="ft-center custom-i18n" data-i18nkey="scan_to_pay">扫一扫付款（元）</div>
                            <div class="ft-center qrcode-header-money">${order.price}.00</div>
                        </div>
                        <div class="qrcode-body">
                            <div class="qrcode-border">
                                <div class="qrcode-img-wrapper">
                                    <img src="/static/images/code.png" class="erweimaImg">
                                </div>
                                <div class="qrcode-img-explain fn-clear">
                                    <img class="fn-left" src="/static/images/scan.png" alt="扫一扫标识">
                                    <div style=" " class="fn-left custom-i18n" data-i18nkey="scan_tips">打开手机支付宝<br>扫一扫继续付款</div>
                                </div>
                            </div>

                        </div>
                        <div class="qrcode-footer">
                            <a href="" class="qrcode-downloadApp">首次使用请下载手机支付宝</a>
                        </div>
                        <div class="clear" style="height:20px;"></div>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <script>


        function pay(orderId) {
            $.ajax({
                url: "/order/updateStatus",
                type: "POST",
                dataType: "json",
                data: {id: orderId},
                success: function(result) {
                    console.log(result)
                    if (result.success){
                        $.messager.show({
                            title: 'Success',
                            msg: '支付成功，即将跳转个人中心！'
                        });

                        setTimeout(function() {
                            window.location = '/personal';
                        }, 2000);
                    }
                }
            });
        }
    </script>
</body>
</html>